<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>房源管理</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">
    <button type="button" class="layui-btn" id="batchDeleteBtn">
        <i class="layui-icon">&#xe640;</i> 批量删除
    </button>
    <button type="button" class="layui-btn" id="addQuestionBtn">
        <i class="layui-icon">&#xe608;</i> 添加房源
    </button>

    <div class="layui-inline" style="margin-left: 650px">
        <div class="layui-input-inline">
            <input type="text" id="value" style="width: 330px" name="name" lay-verify="required" placeholder="请输入小区名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" id="search">搜索</button>
</form>

<table id="roomTable" lay-filter="roomTable"></table>


<!-- 添加页面开始 -->
<form class="layui-form" id="addRoomForm" lay-filter="addRoomForm" style="display: none;padding: 20px 55px 0px 0px">
    <div class="layui-form-item">
        <label class="layui-form-label">房源名称</label>
        <div class="layui-input-block">
            <input type="text"  name="name" lay-verify="required" placeholder="请输入房源名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源租金</label>
        <div class="layui-input-block">
            <input type="number" name="price" lay-verify="required|number" placeholder="请输入房源租金" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" checked value="1" title="复式">
            <input type="radio" name="type" value="2" title="别墅">
            <input type="radio" name="type" value="3" title="园景房">
            <input type="radio" name="type" value="4" title="阁楼">
            <input type="radio" name="type" value="5" title="单元式">
            <input type="radio" name="type" value="6" title="公寓式">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源简介</label>
        <div class="layui-input-block">
            <input type="text" name="introduce" lay-verify="required" placeholder="请输入房源简介" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadadd">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="url" value="" id="url">
            <img src='' height='50px' id="addRoom"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可住人数</label>
        <div class="layui-input-block">
            <input type="number"  name="live" lay-verify="required|number" placeholder="请输入可住人数" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">起始时间</label>
        <div class="layui-input-block">
            <input type="text" id="onTime" autocomplete="off" name="onTime" lay-verify="required" placeholder="请选择上架时间" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit  lay-filter="addRoomSubmit">立即添加</button>
            <button type="button" id="closeRoomAdd" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 添加页面结束 -->

<!-- 编辑页面开始 -->
<form class="layui-form" id="amendRoomForm" lay-filter="amendRoomForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="id" name="id" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">房源名称</label>
        <div class="layui-input-block">
            <input type="text"  name="name" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源租金</label>
        <div class="layui-input-block">
            <input type="number" name="price" lay-verify="required|number" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" value="1" title="复式">
            <input type="radio" name="type" value="2" title="别墅">
            <input type="radio" name="type" value="3" title="园景房">
            <input type="radio" name="type" value="4" title="阁楼">
            <input type="radio" name="type" value="5" title="单元式">
            <input type="radio" name="type" value="6" title="公寓式">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源简介</label>
        <div class="layui-input-block">
            <input type="text" name="introduce" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房源图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="amendUpload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="url" value="" id="amendUrl">
            <img src='' height='50px' id="amendRoom"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可住人数</label>
        <div class="layui-input-block">
            <input type="number"  name="live" lay-verify="required|number"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">起始时间</label>
        <div class="layui-input-block">
            <input type="text" id="offTime" autocomplete="off" name="onTime" lay-verify="required" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit  lay-filter="amendRoomSubmit">确认修改</button>
            <button type="button"  id="closeAmendRoom" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 编辑页面结束 -->

<!-- 分配页面开始 -->
<form class="layui-form" id="detailRoomForm" lay-filter="detailRoomForm" style="display: none;padding: 20px 55px 0px 0px">
    <input type="hidden" id="roomId" name="id" value="">

    <div class="layui-form-item">
        <label class="layui-form-label">分配中介</label>
        <div class="layui-input-block" id="intermediary">

        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit  lay-filter="detailRoomSubmit">确认分配</button>
            <button type="button"  id="closeDetailRoom" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 分配页面结束 -->


<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">


    layui.use(['table','form','layer','laydate','upload'],function () {

        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var upload = layui.upload;
        table.render({
            elem:'#roomTable'
            ,url:'house-room/list'
            ,page:true
            ,limit:6
            ,limits:[4,6,8,10]
            ,cols:[[
                {type:'checkbox'}
                ,{field:'id',title:'编号',sort:true,width:80,align:'center'}
                ,{field:'name',title:'房源名称',align:'center'}
                ,{field:'price',title:'房源租金', templet:function (d) {
                        return d.price + "元/月";
                    },sort:true,align:'center'}
                ,{field:'type',title:'房源分类', templet:function (d) {
                    switch (d.type) {
                        case 1 : return "复式"; break;
                        case 2 : return "别墅"; break;
                        case 3 : return "园景房"; break;
                        case 4 : return "阁楼"; break;
                        case 5 : return "单元式"; break;
                        case 6 : return "公寓式"; break;
                    }
                    },align:'center'}
                ,{field:'introduce',title:'房源简介'}
                ,{field:'url',title:'房源图片',align:'center',templet:function (d) {
                        return "<img src='"+d.url+"' height='50px'/>";
                    }}
                ,{field:'live',title:'可住人数',align:'center', width:100}
                ,{field:'onTime',title:'上架时间',align:'center'}
                ,{field:'offTime',title:'下架时间',align:'center'}
                ,{toolbar: '#barDemo', align:'center', width: 200}
            ]]
        });
        /**
         * 监听roomTable的查看编辑删除按钮的单击事件
         * */
        table.on('tool(roomTable)',function (obj) {
            var data = obj.data;
            //编辑按钮的单击事件
            if(obj.event=='edit'){
                form.val("amendRoomForm",data);
                $("#amendRoom").prop("src", data.url);
                $("#offTime").val(data.onTime + " - " + data.offTime);

                layer.open({
                    type:1,
                    title:['编辑房源','font-size:18px;color:orange;'],
                    area:['760px', '80%'],
                    content:$("#amendRoomForm"),
                });
            }
            //删除按钮的单击事件
            if(obj.event=='del'){
                layer.confirm("你确定要删除房源吗",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'house-room/delete',
                        data:{
                            roomId: data.id
                        },
                        type:"delete",
                        dataType:"json",
                        success:function (result) {
                            if(result.code==200){
                                table.reload("roomTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg("删除房源成功！",{icon:'1',title:'提示',closeBtn :'1'});
                            }
                        }
                    });
                })
            }
            //分配
            if(obj.event=='detail'){
                form.val("detailRoomForm",data);
                $.ajax({
                    url: 'house-room-intermediary/checkBox',
                    data: {
                        roomId:data.id
                    },
                    type: 'get',
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == 200) {
                            $("#intermediary").html("");
                            var checkBoxList = result.data;
                            for (var i = 0; i < checkBoxList.length; i++) {
                                if (checkBoxList[i].checked == true) {
                                    $("#intermediary").append("<input type=\"checkbox\" value='"+ checkBoxList[i].id +"' name=\"zjid\" checked title=\""+ checkBoxList[i].title +"\">");
                                }else {
                                    $("#intermediary").append("<input type=\"checkbox\" value='"+ checkBoxList[i].id +"' name=\"zjid\" title=\""+ checkBoxList[i].title +"\">");
                                }
                            }
                            form.render();
                        }
                    }
                });
                layer.open({
                    type:1,
                    title:['分配房源中介','font-size:18px;color:orange;'],
                    area:['60%', '50%'],
                    content:$("#detailRoomForm"),
                });
            }
        });
        /**
         * 点击添加按钮弹出层展示添加页面
         * */
        $("#addQuestionBtn").click(function () {
            layer.open({
                type:1,
                area:['760px','80%'],
                title:['添加房源','font-size:18px;color:orange;'],
                content:$("#addRoomForm"),
            });
        });
        /**
         * 渲染添加页面的头像上传
         * */
        upload.render({
            elem:'#uploadadd'
            ,url:'house-room/upload'
            ,done: function(result){
                if(result.code==200){
                    $("#addRoom").prop("src",result.data);
                    $("#url").val(result.data);
                }
            }
        });
        /**
         * 渲染修改页面的头像上传
         * */
        upload.render({
            elem:'#amendUpload'
            ,url:'house-room/upload'
            ,done: function(result){
                if(result.code==200){
                    $("#amendRoom").prop("src",result.data);
                    $("#amendUrl").val(result.data);
                }
            }
        });
        /**
         * 监听添加用户页面的 立即添加 按钮
         * */
        form.on("submit(addRoomSubmit)",function (obj) {
            layer.confirm("你确定要添加房源吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'house-room/insert',
                    data:obj.field,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==200){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("roomTable");
                            layer.msg("添加房源成功！",{icon:'1',title:'提示',closeBtn :'1'});
                        }
                    }
                });
            });
            return false;
        });

        /**
         * 监听修改页面的确认修改按钮
         * */
        form.on("submit(amendRoomSubmit)",function (obj) {
            layer.confirm("你确定要修改房源吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'house-room/update',
                    data:obj.field,
                    type:"put",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==200){
                            obj.form.reset();
                            layer.closeAll();
                            table.reload("roomTable");
                            layer.msg("修改房源成功！",{icon:'1',title:'提示',closeBtn :'1'});
                        }
                    }
                });
            })
            return false;
        });

        /**
         * 监听分配页面的确认修改按钮
         * */
        form.on("submit(detailRoomSubmit)",function (obj) {
            //获取checkbox[name='zjid']的值
            var arr = new Array();
            $("input:checkbox[name='zjid']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            var ids = arr.join(",");//将数组合并成字符串

            if (ids == null || ids == [] || ids == '') {
                layer.msg("请至少选择一个中介！",{icon:'2',title:'提示',closeBtn :'1'});
            }else {
                layer.confirm("你确定要分配房源中介吗？",{icon:'3',title:'提示'},function () {
                    $.ajax({
                        url:'house-room-intermediary/update',
                        data:{
                            roomId:obj.field.id,
                            ids:ids
                        },
                        type:"put",
                        dataType:"json",
                        success:function (data) {
                            if(data.code==200){
                                obj.form.reset();
                                layer.closeAll();
                                table.reload("roomTable");
                                layer.msg("房源分配中介成功！",{icon:'1',title:'提示',closeBtn :'1'});
                            }
                        }
                    });
                });
            }

            return false;
        });
        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeRoomAdd").click(function () {
            layer.closeAll();
        });
        $("#closeAmendRoom").click(function () {
            layer.closeAll();
        });
        $("#closeDetailRoom").click(function () {
            layer.closeAll();
        })
        /**
         * 搜索功能
         * */
        $("#search").click(function () {
            if($("#value").val()==""){
                table.reload("roomTable",{
                    url:'house-room/list',
                    page:{
                        curr:1
                    }
                });
            }else{
                table.reload("roomTable",{
                    url:'house-room/search',
                    where:{
                        name:$("#value").val()
                    }
                });
            }
        });

        /**
         *批量删除功能
         * */
        $("#batchDeleteBtn").click(function () {
            var checkStatus = table.checkStatus('roomTable');
            if(checkStatus.data.length>0){
                layer.confirm("你确定要删除房源吗？",{icon:'3',title:'提示'},function () {
                    var roomIds = "";
                    for(var i=0;i<checkStatus.data.length;i++){
                        roomIds += "roomIds="+checkStatus.data[i].id+"&"
                    }
                    $.ajax({
                        url:"house-room/deleteBatch",
                        data:roomIds,
                        type:"delete",
                        dataType:"json",
                        success:function (data) {
                            if(data.code==200){
                                table.reload("roomTable",{
                                    page:{
                                        curr:1
                                    }
                                });
                                layer.msg("批量删除房源成功！",{icon:'1',title:'提示',closeBtn :'1'});
                            }
                        }
                    });
                })
            }else{
                layer.msg("请至少选择一个房源！",{icon:'2',title:'提示',closeBtn :'1'});
            }
        });



        //日期范围
        laydate.render({
            elem: '#onTime'
            ,range: true
        });

        //日期范围
        laydate.render({
            elem: '#offTime'
            ,range: true
        });


    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">分配</a>
</script>

</body>
</html>